import { Callout } from 'nextra/components';

# Fixture Inputs

The following APIs allow you manipulate components visually by defining fixture inputs in the [Control Panel](/docs/user-interface.md#control-panel).

<Callout type="info">
  Prop inputs are created automatically for [Node
  fixtures](/docs/fixtures/fixture-modules.md#node-fixtures) in the Cosmos UI.
  This enables you to tweek component props and see the result in real time
  without any configuration.
</Callout>

## `useFixtureInput`

```jsx filename="CounterButton.fixture.jsx"
import { useFixtureInput } from 'react-cosmos/client';

export default () => {
  const [count, setCount] = useFixtureInput('count', 0);

  return <CounterButton count={count} increment={() => setCount(count + 1)} />;
};
```

The `useFixtureInput` hook can be used with any type of serializable data, like strings, numbers and booleans, including objects and arrays.

### Number inputs

While focused on number inputs you can use the up and down arrow keys to increment and decrement the value. Hold ⎇ for .1 increments, ⇧ for 10 increments, and ⌘ for 100 increments.

### Boolean inputs

The [Boolean Input Plugin](/docs/plugins#boolean-input-plugin) can be installed to turn boolean inputs into checkboxes.

## `useFixtureSelect`

```jsx filename="Button.fixture.jsx"
import { useFixtureSelect } from 'react-cosmos/client';

export default () => {
  const [buttonType] = useFixtureSelect('buttonType', {
    options: ['primary', 'secondary', 'danger'],
  });

  return <Button type={buttonType}>Press me</Button>;
};
```

`useFixtureSelect` also returns a setter as the second value in the return tuple, like the `useState` hook, in case you want to change the value programatically.

### Option groups

You can group options by passing an array of objects with `group` and `options` properties.

```jsx
const [color] = useFixtureSelect('color', {
  options: [
    { group: 'warm', options: ['red', 'orange', 'yellow'] },
    { group: 'cold', options: ['blue', 'green', 'purple'] },
  ],
});
```

<Callout type="info">
  `useFixtureInput` and `useFixtureSelect` (and Cosmos in general) work great
  with TypeScript.
</Callout>
